@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3598568_m6681dzp56.css);
@function getvw($w) {
  @return ($w/750) * 100 + vw;
}
.warp {
  header {
    nav {
      display: flex;
      padding: getvw(17) getvw(23) getvw(9) getvw(23);
      align-items: center;
      justify-content: space-between;
      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(123);
        height: getvw(57);
        border: 1px solid orange;
        border-radius: getvw(20);
        position: relative;

        h4 {
          padding: 0 getvw(25);
          position: absolute;
          margin: getvw(20) auto;
          top: getvw(-50%);
          left: getvw(-50%);
        }
      }
      .area {
        i {
          font-size: getvw(60);
          color: orange;
        }
      }
    }
    .banner {
      .img {
        width: getvw(705);
        height: getvw(260);
        margin: getvw(20) auto;
      }
      .box {
        width: getvw(666);
        height: getvw(59);
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        .box1 {
          color: orange;
          p {
            font-size: getvw(55);
          }
        }
        .box2 {
          display: flex;
          justify-content: center;
          align-items: center;
          width: getvw(111);
          height: getvw(59);
          background-color: orange;
          border-radius: getvw(11);
          color: aliceblue;
        }
      }
      .son {
        width: getvw(666);
        height: getvw(36);
        display: flex;
        justify-content: space-between;
        margin: getvw(20) auto;
        .son2 {
          display: flex;
          align-items: center;
          i {
            font-size: getvw(37);
            color: #ff9344;
            padding-right: getvw(10);
          }
          span {
            color: #ff9344;
          }
        }
        .son1{
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .red{
        width: getvw(664);
        height: getvw(67);
        display: flex;
        justify-content: space-between;
        margin: getvw(20) auto;
        background-color: #ff9344;
        align-items: center;
        .red1{
          color: aliceblue;
          margin-left:getvw(10) ;
          margin-right: getvw(10);
        }
      }
    }
  }
  main{
    .left{
      width: getvw(687);
      height: getvw(176);
      margin: getvw(10) auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box{
        display: flex;
        margin-left: getvw(10);
        .box1{
          img{
            width: getvw(177);
            height: getvw(176);
          }
        }
        .box2{
          margin-left: getvw(10);
          line-height: getvw(46);
          i{
            color: #ff9344;
          }
          p{
            color: gray;
          }
          a{
            color: #ff9344;
          }
        }
      }
      .boox{
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(111);
        height: getvw(59);
        background-color: #ff9344;
        border-radius: getvw(11);
        p{
          color: aliceblue;  
        }
      }
    }
    .right{
      width: getvw(687);
      height: getvw(176);
      margin: getvw(10) auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box{
        display: flex;
        margin-left: getvw(10);
        .box1{
          img{
            width: getvw(177);
            height: getvw(176);
          }
        }
        .box2{
          margin-left: getvw(10);
          line-height: getvw(46);
          i{
            color: #ff9344;
          }
          p{
            color: gray;
          }
          a{
            color: #ff9344;
          }
        }
      }
      .boox{
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(111);
        height: getvw(59);
        background-color: #ff9344;
        border-radius: getvw(11);
        p{
          color: aliceblue;
        }
      }
    }
    .foot{
      width: getvw(687);
      height: getvw(176);
      margin: getvw(10) auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box{
        display: flex;
        margin-left: getvw(10);
        .box1{
          img{
            width: getvw(177);
            height: getvw(176);
          }
        }
        .box2{
          margin-left: getvw(10);
          line-height: getvw(46);
          i{
            color: #ff9344;
          }
          p{
            color: gray;
          }
          a{
            color: #ff9344;
          }
        }
      }
      .boox{
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(111);
        height: getvw(59);
        background-color: #ff9344;
        border-radius: getvw(11);
        p{
          color: aliceblue;  
        }
      }
    }
    
  }
  footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-top: getvw(50);
    background-color: aliceblue;
    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(708);
      height: getvw(120);
      margin-left: getvw(20);
      .font1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        p{
          a{
            color: black;
          }
        }
      }
      i {
        font-size: getvw(40);
        color: #ff9344;
      }
    }
  }
}
